import React from 'react';
import { Container, chakra } from '@chakra-ui/core';
import LoginForm from '../login-form';
import RegistForm from '../regist-form';

const Header = chakra('h4', {
    themeKey: 'CustomHeader',
});

const Link = chakra('a', {
    themeKey: 'CustomLink',
});

const HeaderContainer = chakra('div');
const HeaderSplitB = chakra('b');

export default () => {
    const [active, setActive] = React.useState('login');

    return <Container marginTop="200px" bgColor="#fff" w={400} borderRadius={4} boxShadow="0 0 8px rgba(0,0,0,.1)" padding="50px 50px 30px">
        <Header>
            <HeaderContainer display="flex" justifyContent="center" alignItems="center">
                <Link variant={active === 'login' ? 'active' : 'primary'} onClick={() => setActive('login')}>登录</Link>
                <HeaderSplitB padding="10px">·</HeaderSplitB>
                <Link variant={active === 'regist' ? 'active' : 'primary'} onClick={() => setActive('regist')}>注册</Link>
            </HeaderContainer>
        </Header>
        {active === 'login' && <LoginForm />}
        {active === 'regist' && <RegistForm />}
    </Container>
}